<script setup lang="ts">
const el = ref(null)
const show = ref(false)
useIntersectionObserver(el, ([{ isIntersecting }]) => {
  if (isIntersecting)
    show.value = isIntersecting
})
</script>

<template>
  <div id="zplc" ref="el" class="zhaopinliucheng">
    <Transition name="animate-zoomIn">
      <h1 v-show="show" class="line-center-title">
        招聘流程
      </h1>
    </Transition>
    <Transition name="animate-zoomIn">
      <img v-show="show" class="top-img" src="https://public-oss-file.zmaxfilm.com/website-compress/join-6.png" alt="流程">
    </Transition>
  </div>
</template>

<style lang="scss" scoped>
.zhaopinliucheng {
  width: 1200px;
  margin: 0 auto;
  min-height: 230px;
  padding-top: 50px;
  padding-bottom: 80px;

  .line-center-title {
    font-family: PangMenZhengDaoBiaoTiTi;
    margin-bottom: 40px;
  }

  .top-img {
    width: 100%;
    height: 223px;
    object-fit: cover;
  }
}
</style>
